<template>
  <div v-if="!selected" class="options">
    <div class="option" v-for="option in options" :key="option.icon">
      <div @click="selected = option.description" class="btn-container">
        <div :class="`iconfont ${option.icon}`"/>
        <div class="description">
          {{ option.description }}
        </div>
      </div>
    </div>
  </div>
  <AICreateContainer v-if="!!selected" :mode="selected" @exit="selected = ''"/>
</template>

<script setup>
import {reactive, ref} from 'vue'
import AICreateContainer from './AICreateContainer.vue'

const selected = ref('')
const options = reactive([
  {
    icon: 'icon-icon_xu',
    description: '文章续写',
  },
  {
    icon: 'icon-icon_gai',
    description: '文本改写',
  },
  {
    icon: 'icon-icon_jian',
    description: '文本纠错',
  },
  {
    icon: 'icon-icon_bu',
    description: '补全段落',
  },
])
</script>

<style lang="scss" scoped>
.options{
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
  .option{
    flex-basis: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: .2s linear;
      &:hover{
        transform: translate(0, -0.2em);
      }
      .iconfont{
        font-size: 3em;
      }
      .description{
        font-size: .9em;
        color: #666666;
      }
    }
  }
}
</style>
